<script>
import ModifyData from "@/components/dialog/ModifyData.vue";
import axios from "axios";
import ModifyItem from "@/components/dialog/ModifyItem.vue";
import UserSetting from "@/components/dialog/UserSetting.vue";
import FriendData from "@/components/dialog/FriendData.vue";

export default {
  name: "SHeader",
  components: {FriendData, UserSetting, ModifyItem, ModifyData},
  data() {
    return {
      drawer: false,
      menu: 1,
      drawerSize: 320,
      friend_id: '',
      modify_data: false,
      chat_context: "",
      write_time: "",
      chat_history: {
        friendAvatar: "",
        userAvatar: "",
        remark: "",
        isFriend: "",
        follower: "",
        chatContexts: []
      },
      chat_list: [{
        fid: "",
        content: "",
        avatar: "",
        remark: "",
        time: "",
        noRead: "",
        lastId: "",
        visible: ""
      }],
      chat_loading: false,
      friend_list: [
        {
          uid: "",
          avatar: "",
          nickname: "",
          signature: "",
          remark: "",
          status: ""
        }
      ],
      modify_remark: false,
      input_remark: "",
      remark_fid: "",
      search_friend: "",
      user_setting: false,
      data_dialog: false,
      friendID: '',
      search: "",
      music_list: [
        {title: "宾克斯的美酒.mp3", url: "/api/res/music/宾克斯的美酒.mp3"},
      ],
      singing: 0,
    }
  },
  methods: {
    cutSong(item) {
      let music = document.getElementById('music2')
      music.pause()
      console.log(item)
      music.src = item.url
      this.$nextTick(() => {
        music.play()
        let title = document.getElementsByClassName("scrollText")[0]
        if (document.getElementsByClassName("f_scrollText")[0].style.display !== "none") {
          document.getElementsByClassName("f_scrollText")[0].style.display = "none"
          title.style.display = ""
        }
        let img = document.getElementById('music_img');
        img.src = require('@/assets/img/24gf-pause2 (1).png')
        title.innerText = item.title
        title.style.animationPlayState = 'running'
        let bo_ing = document.getElementById("bo_ing")
        bo_ing.innerText = "正在播放:"
      })

    },
    searchFriend() {
      if (this.search !== '') {
        axios.get(`/api/user/search/${this.search}`)
            .then(res => {
              if (res.data.code === 0) {
                this.friendID = res.data.data
                if (this.friendID === 0) {
                  this.$message.info(res.data.msg)
                  this.friendID = ''
                } else {
                  this.data_dialog = true
                }
              } else {
                this.$message.warning(res.data.msg)
              }
            }).catch(err => this.$message.error(err))
      } else {
        this.$message.warning('请输入内容')

      }

    },
    delChat(fid) {
      axios.get(`/api/chat/del/${fid}`)
          .then(() => {
            this.getChatList();
            this.hideLt()
          })
          .catch(err => this.$message.error(err))
    },
    showDelChat(i) {
      if (this.chat_list[i].visible) {
        document.getElementsByClassName('lt_item')[i].style.backgroundColor = ''

        this.chat_list[i].visible = false
      } else {
        for (let j = 0; j < this.chat_list.length; j++) {
          this.chat_list[j].visible = false
        }
        for (let i = 0; i < document.getElementsByClassName('lt_item').length; i++) {
          document.getElementsByClassName('lt_item')[i].style.backgroundColor = ''
        }
        document.getElementsByClassName('lt_item')[i].style.backgroundColor = '#f1f2f5'
        this.chat_list[i].visible = true
      }

    },
    read() {
      axios.get("/api/chat/read", {params: {fid: this.friend_id, uid: this.$store.state.user.id}})
          .catch(err => this.$message.error(err))
    },
    receiveMsg(msg) {
      let chat = JSON.parse(msg)
      if (chat.friend === this.$store.state.user.id && this.friend_id === Number(chat.uid)) {
        this.read()
        this.chat_history.chatContexts.push(
            {
              uid: this.friend_id,
              time: chat.time,
              context: chat.context
            }
        )
        this.$nextTick(() => {
          document.getElementsByClassName("lt_message_box")[0].scrollTop = document.getElementsByClassName("lt_message_box")[0].scrollHeight
        })
      }
      if (this.menu === 1) {
        this.getChatList()
      }
    },
    getChatList() {
      for (let i = 0; i < document.getElementsByClassName('lt_item').length; i++) {
        document.getElementsByClassName('lt_item')[i].style.backgroundColor = ''
      }
      axios.get("/api/chat/list")
          .then(res => {
            if (res.data.code === 0) {
              this.chat_list = res.data.data
            } else {
              this.$message.warning(res.data.msg)
            }
          })
    },
    drMenuClick(a) {
      let div1 = document.getElementsByClassName('lt')[0]
      let div2 = document.getElementsByClassName('hy')[0]
      this.drawerSize = 320
      this.friend_id = ''
      if (a === 'lt') {
        this.getChatList()
        if (!div1.classList.contains('dr_me_cl')) {
          div1.classList.add('dr_me_cl')
          div2.classList.remove('dr_me_cl')
          this.menu = 1
        }
      } else if (a === 'hy') {
        this.getFriends()

        if (!div2.classList.contains('dr_me_cl')) {
          div2.classList.add('dr_me_cl')
          div1.classList.remove('dr_me_cl')
          this.menu = 2
        }
      }
    },
    getChatHistory() {
      this.chat_loading = true
      axios.get(`/api/friends/chatHistory/${this.friend_id}`)
          .then(res => {
            this.chat_loading = false
            if (res.data.code === 0) {
              this.chat_history = res.data.data
              this.$nextTick(() => {
                document.getElementsByClassName("lt_message_box")[0]
                    .scrollTop = document.getElementsByClassName("lt_message_box")[0]
                    .scrollHeight
              })
            } else {
              this.$message.warning(res.data.msg)
              this.hideLt()
            }
          })
          .catch(err => {
            this.$message.error(err)
            this.hideLt()
          })
    },
    ltItemClick(item, id) {
      let a = document.getElementsByClassName('lt_item')
      if (this.friend_id === id) {
        this.drawerSize = 320
        a[item].style.backgroundColor = ''
        this.friend_id = ''
      } else {
        this.friend_id = id
        this.getChatHistory()
        if (this.menu === 1 && this.chat_list[item].noRead !== 0) {
          this.chat_list[item].noRead = 0
          this.read()
        }
        // this.$bus.$emit("sendMessage", {uid:id,msg:"123"})
        this.$nextTick(() => {
          document.getElementsByClassName('lt_input')[0].focus()
        })
        if (this.drawerSize !== 1370) {
          this.drawerSize = 1370
        }
        for (let i = 0; i < a.length; i++) {
          a[i].style.backgroundColor = ''
        }
        a[item].style.backgroundColor = '#f1f2f5'
      }
    },
    errorHandler(e) {
      e.target.src = this.$store.state.user.avatar
    },
    modifyStatus() {
      axios.get(`/api/user/status/${this.$store.state.user.status === 1 ? 2 : 1}`)
          .then(res => {
            if (res.data.code === 1) {
              this.$message.warning(res.data.msg)
            } else {
              this.$store.commit('setStatus', res.data.data)
            }
          }).catch(err => this.$message.error(err))
    },
    logout() {
      this.$confirm('确认退出登陆吗', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '退出',
        cancelButtonText: '取消'
      })
          .then(() => {
            axios.get("/api/user/logout")
                .then(() => {
                  this.$store.commit('setUser', {id: ''})
                  this.$router.go(0)
                })
          }).catch(() => {
      })
    },
    hideLt() {
      this.drawerSize = 320
      this.friend_id = ''
      for (let i = 0; i < document.getElementsByClassName('lt_item').length; i++) {
        document.getElementsByClassName('lt_item')[i].style.backgroundColor = ''
      }
    },
    getFriends() {
      for (let i = 0; i < document.getElementsByClassName('lt_item').length; i++) {
        document.getElementsByClassName('lt_item')[i].style.backgroundColor = ''
      }
      axios.get("/api/friends")
          .then(res => {
            if (res.data.code === 0) {
              this.friend_list = res.data.data
            } else {
              this.$message.warning(this.res.msg)
            }
          })
    },
    sendChat() {
      if (!this.chat_history.isFriend) {
        if (this.chat_history.chatContexts.length >= 2) {
          if (this.chat_history.follower === this.$store.state.user.id)
            this.$message.warning("对方还未关注你")
          else
            this.$message.warning("请先关注对方")
          this.chat_context = ''
          return
        } else if (this.chat_history.chatContexts.length === 1) {
          if (this.chat_history.chatContexts[0].uid === this.$store.state.user.id) {
            if (this.chat_history.follower === this.$store.state.user.id)
              this.$message.warning("对方还未关注你")
            else
              this.$message.warning("请先关注对方")
            this.chat_context = ''
            return
          }
        }
      }

      let currentTime = new Date();
      let wt = ""
      if (Math.floor((currentTime - this.write_time) / (60 * 1000)) > 5) {
        this.write_time = currentTime
      }
      wt = `${this.write_time.getFullYear()}-${String(this.write_time.getMonth() + 1).padStart(2, '0')}-${String(this.write_time.getDate()).padStart(2, '0')} ${String(this.write_time.getHours()).padStart(2, '0')}:${String(this.write_time.getMinutes()).padStart(2, '0')}`
      this.chat_history.chatContexts.push({
        uid: this.$store.state.user.id,
        time: wt,
        context: this.chat_context
      })
      wt = `${this.write_time.getFullYear()}${String(this.write_time.getMonth() + 1).padStart(2, '0')}${String(this.write_time.getDate()).padStart(2, '0')}${String(this.write_time.getHours()).padStart(2, '0')}${String(this.write_time.getMinutes()).padStart(2, '0')}`
      let formData = new FormData()
      formData.set("fid", this.friend_id)
      formData.set("content", this.chat_context.replace("\n", ""))

      axios.post("/api/chat/add", formData)
          .finally(() => {
            if (this.menu === 1) {
              this.getChatList()
            }
          })

      this.$bus.$emit("sendMessage", {uid: this.friend_id, time: wt, context: this.chat_context.replace("\n", "")})

      this.chat_context = ''
      this.$nextTick(() => {
        document.getElementsByClassName("lt_message_box")[0].scrollTop = document.getElementsByClassName("lt_message_box")[0].scrollHeight
      })
    },
    showChangeRemarks(i, remark) {
      this.remark_fid = i
      this.input_remark = remark
      this.modify_remark = true
    },
    changeRemark(value) {
      this.input_remark = ""
      this.modify_remark = false
      if (value !== '')
        axios.get(`/api/friends/changeRemarks/${this.remark_fid}/${value}`)
            .then(res => {
              if (res.data.code === 0) {
                this.$message.success(res.data.msg)
                this.getFriends()
              } else {
                this.$message.warning(res.data.msg)
              }
            })
            .catch(err => this.$message.error(err))
    },
    cacheFollow(i) {
      axios.get(`/api/friends/cacheFollow/${i}`)
          .then(res => {
            if (res.data.code === 0) {
              this.$message.success(res.data.msg)
              this.getFriends()
            } else {
              this.$message.warning(res.data.msg)
            }
          })
          .catch(err => this.$message.error(err))
    },
    follow() {
      axios.get(`/api/friends/add/${this.friend_id}`)
          .then(() => {
            this.chat_history.isFriend = true
            this.$bus.$emit("sendMessage", {
              uid: this.friend_id,
              time: `${this.write_time.getFullYear()}${String(this.write_time.getMonth() + 1).padStart(2, '0')}${String(this.write_time.getDate()).padStart(2, '0')}${String(this.write_time.getHours()).padStart(2, '0')}${String(this.write_time.getMinutes()).padStart(2, '0')}`,
              context: `${this.$store.state.user.nickname}关注了你`
            })
            let formData = new FormData()
            formData.set("fid", this.friend_id)
            formData.set("content", `${this.$store.state.user.nickname}关注了你`)

            axios.post("/api/chat/add", formData)
            this.$message.success("已关注对方")
          })
          .catch(err => this.$message.error(err))
    },
    showClear(e) {
      let div = document.getElementsByClassName("popper")[0];
      div.style.display = "flex"
      div.style.top = e.clientY + "px"
      div.style.left = e.clientX + "px"
    },
    hideClear() {
      document.getElementsByClassName("popper")[0].style.display = "none"
    },
    modifyFile(e) {
      let fil = e.target.files
      let formData = new FormData();
      if (fil[0]) {
        formData.append("file", fil[0])
        axios.post("/api/music", formData)
            .then(res => {
              if (res.data.code === 0) {
                this.getMusicList()
                this.$message.success(res.data.msg)
              } else {
                this.$message.warning(res.data.msg)
              }
            }).catch(err => this.$message.error(err))
        e.target.value = ""
      }
    },
    selectFile() {
      document.getElementById("music_file").click()
    },
    getMusicList() {
      axios.get("/api/music/list")
          .then(res => {
            if (res.data.code === 0) {
              this.music_list = res.data.data
              this.music_list.unshift({id: 0, title: "宾克斯的美酒.mp3", url: "/api/res/music/宾克斯的美酒.mp3"});
              // this.$nextTick=() =>{
              //   this.cutSong(this.music_list[this.singing])
              // }
              this.$nextTick(() => {
              })
            } else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
    firstGetMusicList() {
      axios.get("/api/music/list")
          .then(res => {
            if (res.data.code === 0) {
              this.music_list = res.data.data
              this.music_list.unshift({id: 0, title: "宾克斯的美酒.mp3", url: "/api/res/music/宾克斯的美酒.mp3"});
              if (this.music_list.length > 1 && this.music_list[1].index === 1) {
                this.singing = 1
              }

            } else {
              this.$message.warning(res.data.msg)
            }
          }).catch(err => this.$message.error(err))
    },
  },
  mounted() {
    this.$bus.$on("receiveMsg", this.receiveMsg)
    if (this.$store.state.user.status === 0) {
      this.modify_data = true
    }
    this.firstGetMusicList()
  },
  beforeDestroy() {
    this.$bus.$off("receiveMsg")
    this.$bus.$off("setSinging")
  },
  watch: {
    "chat_history.chatContexts"() {
      if (this.chat_history.chatContexts.length !== 0)
        this.write_time = new Date(this.chat_history.chatContexts[this.chat_history.chatContexts.length - 1].time)
      else
        this.write_time = new Date()
    },
    drawer(value) {
      if (value) {
        this.menu = 1
        // this.drMenuClick('lt')
        this.getChatList()
        this.$nextTick(() => {
          this.drMenuClick('lt')
        })
      } else {
        this.menu = 0
        this.hideLt()
      }
    },
  }
}
</script>

<template>
  <div class="s_header">
    <div class="data_dialog">
      <el-dialog :visible.sync="data_dialog" title="她说梦里全都有的主页" top="10vh" width="70%" destroy-on-close>
        <friend-data :id="friendID"></friend-data>
      </el-dialog>
    </div>

    <el-dialog :visible.sync="modify_data" title="编辑个人资料" top="8vh" width="25%" @close="modifyStatus" center>
      <modify-data></modify-data>
    </el-dialog>
    <el-dialog :visible.sync="modify_remark" title="添加备注" top="20vh" width="25%">
      <modify-item :remark="input_remark" @changeRemark='changeRemark'></modify-item>
    </el-dialog>
    <el-dialog :visible.sync="user_setting" title="账号设置" top="15vh" width="27%">
      <user-setting></user-setting>
    </el-dialog>
    <el-drawer
        direction="ltr"
        :visible.sync="drawer"
        :size="drawerSize"
        class="drawer"
        :withHeader="false">
      <div class="drawer_z">
        <div class="drawer_top">
          <!--          <img :src="$store.state.user.avatar" class="dr_avatar" alt="">-->
          <el-avatar :src="$store.state.user.avatar" alt=""></el-avatar>
          <div class="dr_t_box">
            <div class="dr_nick">{{ $store.state.user.nickname }}</div>
            <div class="dr_status" v-if="$store.state.user.status !== 0">
              <div class="zx" :style="$store.state.user.status === 1? 'background:#3BB77E':'background:#f44336'"></div>
              <div class="zx_hy" @click="modifyStatus">{{ $store.state.user.status === 1 ? '在线' : '离线' }}</div>
            </div>
          </div>
          <img class="add_hy" alt="" :src="require('@/assets/img/关闭.png')" @click="drawer=false">
        </div>
        <div class="drawer_search">
          <el-input placeholder="搜索" clearable prefix-icon="el-icon-search" v-model="search"
                    @keyup.native.enter="searchFriend"></el-input>
        </div>
        <div class="drawer_body">
          <div class="drawer_menu">
            <div class="lt dr_me_cl" @click="drMenuClick('lt')">聊天</div>
            <div class="hy" @click="drMenuClick('hy')">关注</div>
          </div>
          <div class="drawer_cont">
            <div v-if="menu===1">
              <el-dropdown v-for="(item,index) in chat_list" :key="index" trigger="manual" placement="right">
                <div class="lt_item"
                     @click.left="ltItemClick(index,item.fid)"
                     @click.right="showDelChat(index)">
                  <el-avatar alt="" :src="item.avatar"></el-avatar>
                  <div class="lt_left">
                    <div class="lt_nick">{{ item.remark }}</div>
                    <div class="lt_cont">{{ item.content }}</div>
                  </div>
                  <div class="lt_right">
                    <div class="lt_time">{{ item.time }}</div>
                    <div class="lt_wd" v-if="item.lastId !== $store.state.user.id && item.noRead !==0">{{
                        item.noRead
                      }}
                    </div>
                  </div>
                </div>
                <el-dropdown-menu slot="dropdown" v-model="item.visible">
                  <el-dropdown-item command="a" style="color: #f44336" @click.native="delChat(item.fid)">
                    删除该聊天
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div v-if="menu===2">
              <div class="lt_item" v-for="(item,index) in friend_list" :key="index"
                   @dblclick="ltItemClick(index,item.uid)">
                <el-avatar :class="item.status===2?'off_avatar':''" alt="" :src="item.avatar"></el-avatar>
                <div class="lt_left">
                  <div class="lt_nick">{{ item.remark !== '' ? item.remark : item.nickname }}
                    <span v-if="item.remark!==''">({{ item.nickname }})</span></div>
                  <div class="lt_cont">{{
                      item.status === 2 ? '[离线请留言]' : item.signature.length > 13 ? item.signature.slice(0, 12) + '...' : item.signature
                    }}
                  </div>
                </div>
                <div class="lt_ii">
                  <el-dropdown trigger="click" placement="right">
                    <i class="el-icon-more"></i>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="showChangeRemarks(item.uid,item.remark)">备注</el-dropdown-item>
                      <el-dropdown-item @click.native="friendID=item.uid;data_dialog=true">查看资料</el-dropdown-item>
                      <el-dropdown-item @click.native="cacheFollow(item.uid)" style="color: #f44336">取消关注
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </div>
          <div class="db_i">
            <el-dropdown placement="top">
              <i class="el-icon-s-tools"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="user_setting = true">账号设置</el-dropdown-item>
                <el-dropdown-item style="color: #f44336" @click.native="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>

      </div>
      <div class="drawer_lt" v-if="friend_id!==''">
        <div class="lt_title"><span>{{ chat_history.remark }}</span>
          <i class="el-icon-close" @click="hideLt"></i>
        </div>
        <div class="d_lt_tip" v-if="!chat_history.isFriend">
          <span v-if="chat_history.follower === $store.state.user.id">对方未关注你，只能互发一条消息</span>
          <span v-else>请先关注对方，否者只能互发一条消息 <a style="color: #f44336" @click="follow">点击关注</a></span>
        </div>
        <div class="popper">
          <div class="p_item"><i class="el-icon-info"></i>信息</div>
        </div>
        <div class="lt_message_box" v-loading="chat_loading" @click.right="showClear" @click.left="hideClear">

          <div v-for="(item,index) in chat_history.chatContexts" :key="index" style="padding: 20px 0">
            <div class="lt_date" v-if="index === 0 || item.time !== chat_history.chatContexts[index-1].time">
              {{ item.time }}
            </div>
            <div :class="item.uid===$store.state.user.id?'lci_right':'lci_left'">
              <el-avatar class="lci_avatar"
                         :src="item.uid===$store.state.user.id?chat_history.userAvatar:chat_history.friendAvatar"></el-avatar>
              <div class="lci_cont">
                {{ item.context }}
              </div>
            </div>
          </div>
        </div>

        <div class="lt_input_box">
          <textarea class="lt_input" placeholder="输入聊天内容" v-model="chat_context"
                    @keyup.enter="sendChat"></textarea>
        </div>
        <div class="send_tip">按下Enter键发送</div>
      </div>
    </el-drawer>
    <div class="header_left">
      <el-avatar :src="$store.state.user.avatar" class="avatar" @click.native="drawer=true"
                 @error="errorHandler"></el-avatar>
      <div class="gr_name">
        <div class="big_name">{{ $store.state.user.nickname }}</div>
        <div class="hy_zt" v-if="$store.state.user.status !== 0">
          <div class="zx" :style="$store.state.user.status === 1 ? 'background:#3BB77E':'background:#f44336'"></div>
          <div class="zx_hy" @click="modifyStatus">{{ $store.state.user.status === 1 ? '在线' : '离线' }}</div>
          <!--          <div class="rs">关注好友 1/1</div>-->
        </div>
      </div>
    </div>
    <div class="header_right">
      <div class="bo_ing"><span id="bo_ing">背景音乐:</span>
        <div class="scrollArea">
          <div class="f_scrollText">
            {{ music_list[singing].title }}
          </div>
          <div class="scrollText" style="display: none">
            {{ music_list[singing].title }}
          </div>
        </div>
      </div>
      <el-dropdown @visible-change="getMusicList">
        <img :src="require('@/assets/img/歌单.png')" alt="" class="mus_dan">
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in music_list" :key="index"
                            @click.native="singing = index;cutSong(item)"
                            class="mus_item">
            <i class="el-icon-headset" v-if="singing === index" style="color: #409EFF"></i>
            {{
              item.title
            }}

          </el-dropdown-item>

          <el-dropdown-item style="color: #409EFF" @click.native="selectFile">上传歌曲
            <i class="el-icon-plus"></i>
            <input id="music_file" type="file" style="display: none" @change="modifyFile" accept=".mp3">
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <audio id="music2"
           :src="music_list[singing].url"
           loop="loop">你的浏览器不支持audio标签。
    </audio>
  </div>
</template>

<style>
.data_dialog {
  .el-dialog__body {
    padding-top: 0;
  }

  .cont_box {
    width: 100%;
  }

  .cont_top_hm {
    padding-top: 0;
  }
}

.s_header {
  .el-avatar {
    height: 50px;
    width: 50px;
  }
}

.drawer {
}


.drawer_z {
  position: absolute;
  width: 320px;
  height: 100%;
  background-color: #ffffff;
}

.drawer_top {
  padding-top: 20px;
  padding-left: 20px;
  height: 80px;

  .el-avatar {
    height: 60px;
    width: 60px;
    float: left;
    border-radius: 5px;

  }
}

.dr_t_box {
  margin-left: 20px;
  font-weight: bold;
  float: left;
  cursor: pointer;
}

.dr_nick {
  font-size: 17px;
  height: 30px;
  margin-top: 5px;
}

.dr_status {
  width: 100px;
  height: 30px;
}

.add_hy {
  margin-right: 20px;
  float: right;
  height: 18px;
  width: 18px;
}

.drawer_search {
  padding: 0 10px;
}

.drawer_body {

}

.drawer_menu {
  padding-top: 5px;
  height: 40px;
  border-bottom: 3px solid #f1f2f5;
}

.dr_me_cl {
  color: black;
  border-bottom: 3px solid #409EFF;
}

.drawer_menu .lt, .drawer_menu .hy {
  width: 50%;
  float: left;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  color: #707070;
  cursor: pointer;
}

.drawer_menu .lt:hover, .drawer_menu .hy:hover {
  color: black;
}

.db_i {
  position: absolute;
  bottom: 8px;
  right: 15px;
}

.db_i i {
  font-size: 25px;
  color: #707070;
  cursor: pointer;
}

.db_i i:hover {
  color: #409EFF;
}

.drawer_cont {
  padding-top: 3px;
  height: 510px;
  overflow-y: auto;
  overflow-x: hidden;
}


.lt_item {
  cursor: pointer;
  height: 70px;
  display: flex;

  .el-avatar {
    margin-left: 8px;
    margin-top: 9px;
    height: 50px;
    width: 50px;
  }
}

.off_avatar {
  filter: grayscale(100%);
}

.lt_item:hover {
  background-color: #f1f2f5;
}


.lt_left {
  width: 166px;
  padding-left: 10px;
}

.lt_nick {
  height: 50%;
  line-height: 40px;
}

.lt_nick span {
  font-size: 13px;
  color: #7e8a8c;
}

.lt_cont {
  margin-top: 5px;
  font-size: 13px;
  color: #7e8a8c;
}

.lt_right {
  font-size: 13px;
  position: relative;
  width: 86px;

  .mask {
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f1f2f5;
    position: absolute;
    align-items: center;

  }

  .mask img {
    height: 24px;
    width: 25px;
    margin-left: 30px;
  }
}

.lt_time {
  line-height: 40px;
  height: 50%;
  text-align: right;
  padding-right: 14px;
}

.lt_wd {
  height: 20px;
  width: 30px;
  background-color: rgba(1, 1, 1, 0.3);
  color: white;
  padding-top: 3px;
  border-radius: 20px;
  margin-left: 35px;
  text-align: center;
}

.lt_ii {
  margin-left: 35px;
  display: flex;
  align-items: center;
}

.lt_ii i {
  font-size: 20px;
}

.drawer_lt {
  height: 100%;
  width: 1050px;
  margin-left: 320px;
  background-color: #f1f2f5;
}

.d_lt_tip {
  position: absolute;
  width: 1050px;
  text-align: center;
  background-color: #fce9cd;
  padding: 3px 0;
  color: #222327;
}

.d_lt_tip i {
  cursor: pointer;
  float: right;
  margin-right: 10px;
  margin-top: 2px;
  color: #f44336;
}


.lt_title {
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  color: white;
  background-color: #409EFF;
  text-align: center;
}

.lt_title i {
  float: right;
  margin-right: 10px;
  line-height: 60px;
  cursor: pointer;
}


.lt_message_box {
  width: 1050px;
  height: 480px;
  overflow-y: auto;
  border-bottom: 1px solid #d3d3d3;
  display: flex;
  flex-direction: column;
}

.popper {
  display: none;
  padding: 10px 15px;
  position: absolute;
  top: 0;
  box-shadow: 0 0 5px #cdcdcd;
  border-radius: 10px;
  background-color: #ffffff;
  flex-direction: column;
  cursor: pointer;
}

.popper .p_item {
  text-align: center;
}

.popper .p_item:hover {
  color: #f44336;
}

.lci_left {
  padding-left: 20px;

  .lci_cont {
    margin-left: 15px;
    float: left;
    color: white;
    background-color: #409EFF;
  }

  .lci_avatar {
    float: left;
  }
}


.lci_right {
  padding-right: 20px;

  .lci_cont {
    margin-right: 15px;
    float: right;
    color: black;
    background-color: white;
  }

  .lci_avatar {
    float: right;
  }
}

.lci_cont {
  margin-top: 5px;
  display: inline-block;
  max-width: 700px;
  padding: 10px 15px;
  word-wrap: break-word;
  border-radius: 10px;
}

.lt_date {
  font-size: 13px;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  color: #7e8a8c;
}

.lt_input_box {
  height: 170px;
  padding: 5px 10px 0;
}

.lt_input {
  background-color: #f1f2f5;
  border: none;
  height: 170px;
  width: 100%;
  resize: none;
  outline: none;
  font-size: 17px;
}

.send_tip {
  float: right;
  font-size: 15px;
  color: #707070;
  margin-right: 15px;
}

.header_left {
  float: left;
  margin-left: 5%;
  width: 270px;
}

.avatar {
  margin-top: 3px;
  float: left;
}

.gr_name {
  cursor: pointer;
  float: left;
  margin-left: 20px;
  height: 60px;
}

.big_name {
  height: 30px;
  font-weight: bold;
  line-height: 35px;

}

.hy_zt {
  height: 30px;
  line-height: 23px;
  font-size: 13px;
}

.zx {
  float: left;
  height: 12px;
  width: 12px;
  background-color: #3BB77E;
  border-radius: 50%;
  margin-top: 6px;
}

.zx_hy {
  float: left;
  margin-left: 4px;
}

.rs {
  float: left;
  margin-left: 10px;
}

.header_right {
  margin-right: 3%;
  float: right;

}

.mus_item {
  .el-icon-close:hover {
    color: #f44336;
  }
}

.bo_ing {
  float: left;
  line-height: 60px;
  z-index: 1;

}

.mus_dan {
  margin-left: 3px;
  margin-top: 10px;
  height: 40px;
  width: 40px;
  z-index: 1;

}

.scrollArea {
  margin-left: 5px;
  float: right;
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 60px;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}

.scrollText {
  animation: scroll1 7s linear infinite;
  animation-play-state: paused;
}


@keyframes scroll1 {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes scroll2 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

</style>